<template>
    <div>
        <el-card style="margin-top: 20px">
            <template #header>
                <div class="title">系统信息</div>
            </template>
            <template #default>
                <el-descriptions :column="3" border>
                    <template v-for="item in systemLists">
                        <el-descriptions-item
                            :label="item.label"
                            label-align="right"
                            align="center"
                            label-class-name="label_class"
                            class-name="my-content"
                        >
                            {{ item.text }}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
            </template>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import ItemView from './item.vue'

const systemLists = [
    { label: '系统名称', text: '胖头快速构建系统' },
    { label: '版本号', text: 'v0.0.1' },
    { label: '版权所有', text: '重庆胖头网络科技有限公司' },
    { label: '服务器系统', text: 'Linux' },
    { label: '网站域名/IP', text: '' },
]
</script>

<style scoped lang="scss">
.title {
    font-size: 1rem;
    font-weight: bold;
}
.item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
:deep(.label_class) {
    width: 10rem;
}
</style>
